'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';


import {connect} from 'react-redux';
import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";
import Color from "../../../../core/constant/color";
import {userActions} from '../../../../actions/index';
import CompGenderAge from '../../../../core/component-biz/comp.gender-age';
import CompLocationCity from "../../../../core/component-biz/comp.location-city";
import ScrollableTabView from '@cross2d/react-native-scrollable-tab-view';
import TabBar from '../../../../core/component-biz/comp.tab-bar';
import UserSkillItem from '../../../../core/component-biz/comp.user-skill-item'

class PersonInfoScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        this.fetchSkillDetailInfo();
    }

    /**
     * 从服务器刷新技能资质
     */
    fetchSkillDetailInfo() {
        const {dispatch} = this.props;
        const {skillInfo} = this.props.navigation.state.params;

        console.log(skillInfo, "------->skillInfo");
        if (skillInfo && skillInfo.hasOwnProperty('id')) {
            dispatch(userActions.getSkillDetail(skillInfo.id))
        }
    }

    getSkillDetailInfo() {
        const {skillInfo} = this.props.navigation.state.params;
        const {userSkillDetails} = this.props;
        let detailSkillInfo = null;
        if (skillInfo && skillInfo.hasOwnProperty('id')) {
            detailSkillInfo = userSkillDetails[skillInfo.id];
        }
        return detailSkillInfo;
    }

    genGenderUI(gender) {
        if (gender) {
            const genderUrl = gender == "1" ? require('../../../../img/gender_boy.png') : require('../../../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genUserSkillDetailPanelUI() {
        const {skillInfo} = this.props.navigation.state.params;
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.bigImagePanel}>
                    {skillDetailInfo.hasOwnProperty('zizhitu_url') &&
                    <View>
                        <Image source={{uri: Util.substrImageUrl(skillDetailInfo.zizhitu_url)}}
                               style={styles.bigImage}/>
                        <View style={styles.userDetailTop}>
                            <Text style={styles.userNickName}>{skillInfo.nick_name}</Text>
                            <View style={styles.userInfoAgeAndLocation}>
                                <CompGenderAge gender={skillInfo.gender == "1"} age={skillInfo.age}/>
                                <CompLocationCity city={`海淀区`}/>
                            </View>
                            <Text style={styles.userSkillName}>{skillInfo.skill_name}</Text>
                        </View>
                    </View>}
                </View>

            );
        }

    }

    onPressFocus(skillDetailInfo) {
        const {dispatch} = this.props
        const {isAttention} = skillDetailInfo;

        dispatch(userActions.focus(skillDetailInfo.person_id, !isAttention)).then(() => {
            //刷新技能列表
            this.fetchSkillDetailInfo();
        })
    }


    genFocusButtonUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            const {isAttention} = skillDetailInfo;
            return (
                <IconButton style={isAttention ? styles.btnFocus : styles.btnUnFocus}
                            textStyle={isAttention ? styles.btnFocusText : styles.btnUnFocusText}
                            title={isAttention ? "已关注" : "关注"} onPress={this.onPressFocus.bind(this, skillDetailInfo)}/>
            );
        }
    }

    genUserInfoDetailPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.userInfoDetailPanel}>
                    <View style={styles.userTinyInfoPanel}>
                        {skillDetailInfo.hasOwnProperty('touxaing_url') &&
                        <Image source={{uri: Util.substrImageUrl(skillDetailInfo.touxaing_url)}}
                               style={styles.userHeadImage}/>}
                        <View style={styles.userTinyInfoMid}>
                            <View style={styles.userTinyInfoMidTop}>
                                <Text style={styles.userNickName}>{skillDetailInfo.nick_name} </Text>
                            </View>
                            <View style={styles.userTinyInfoMidBottom}>
                                <View style={styles.userGenderGroup}>
                                    {this.genGenderUI(skillDetailInfo.gender)}
                                    <Text style={styles.age}>{skillDetailInfo.age}</Text>
                                </View>
                                <Text style={styles.lastTime}>{skillDetailInfo.times}</Text>
                            </View>
                        </View>
                        <View style={styles.userTinyInfoRight}>
                            {this.genFocusButtonUI()}
                        </View>
                    </View>
                    {skillDetailInfo.skillDesc && <View style={styles.userDetailPanel}>
                        <View style={styles.userDetailBottom}>
                            <Text style={styles.userSkillDesc}>{skillDetailInfo.skillDesc}</Text>
                        </View>
                    </View>}
                </View>
            );
        }
    }

    genStarUI(key, startCount) {
        let starUI = [];
        for (let i = 0; i < startCount; i++) {
            starUI.push(<Image key={`star-item-${key}-${i}`} source={require('../../../../img/icon_star.png')}
                               style={styles.iconStar}/>)
        }
        return (<View style={styles.iconStarPanel}>
            {starUI}
        </View>);
    }

    genUserCommentItemUI(evaluateInfo, index) {
        return (
            <View style={styles.userCommentItem} key={`user-comment-item-${index}`}>
                <View style={styles.commentItemHead}>
                    {evaluateInfo.touxiang_url && <Image source={{uri: Util.substrImageUrl(evaluateInfo.touxiang_url)}}
                                                         style={styles.commentItemHeadImage}/>}
                    <Text
                        style={styles.commentItemUserNickName}>{evaluateInfo.hasOwnProperty('nick_name') ? evaluateInfo.nick_name : '匿名'}</Text>
                    <Text style={styles.commentItemTime}>{evaluateInfo.evaluateDate}</Text>
                </View>
                <View style={styles.commentItemBody}>
                    {this.genStarUI("user-comment", evaluateInfo.evaluateScore)}
                    <Text style={styles.commentItemText}>{evaluateInfo.evaluateComment}</Text>
                </View>

            </View>
        );
    }

    genUserCommentPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();

        console.log(skillDetailInfo, "----->userCommentPanelUI--->skillDetailInfo");
        if (skillDetailInfo) {
            return (
                <WinPanel title={`评论(${skillDetailInfo.evaluateNumber}次)`}>
                    {skillDetailInfo.evaluateTop3 && skillDetailInfo.evaluateTop3.length > 0 && skillDetailInfo.evaluateTop3.map((evaluateInfo, index) => this.genUserCommentItemUI(evaluateInfo, index))}
                </WinPanel>
            );
        }

    }

    onPressOrder = () => {
        const {navigate} = this.props.navigation;
        const {skillInfo} = this.props.navigation.state.params;
        //跳转到搜索列表
        navigate('OrderScene', {
            title: "下单",
            skillInfo: skillInfo,
        })
    }


    genTabPageSkillListUI() {
        const list = [
            {
                "id": 1,
                "person_id": 17,
                "price": 20,
                "skillDesc": "擅长中下，全时间段接单",
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "wangzherongyao_zizhi_template",
                "emp_id": 17,
                "nick_name": "小铃铛",
                "grade_id": 433,
                "skill_id": 16,
                "orderNumber": 11,
                "evaluateNumber": 5,
                "orderNumber30": 10,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "systemDesc": "QQ区 强势核心 全区有号",
                "unit": "半小时",
                "zizhitu_url": "wangzherongyao_zizhi_template@/media/235.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银大叔",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 1
            },
            {
                "id": 2,
                "person_id": 17,
                "price": 10,
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "jiaoxing_zizhi_template",
                "emp_id": 17,
                "skill_id": 22,
                "nick_name": "花仙子",
                "orderNumber": 2,
                "evaluateNumber": 1,
                "orderNumber30": 1,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "unit": "次",
                "zizhitu_url": "jiaoxing_zizhi_template@/media/236.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银月套餐",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 2
            }
        ];
        return (
            <ScrollView style={styles.pagePanelScrollView}>
                {list.map((item, index) => <UserSkillItem key={`common-user-skill-item-${index}`} item={item}/>)}
            </ScrollView>
        );
    }

    genTabPageSkillUI() {
        return (
            <View style={styles.pagePanelScrollView}>
                {this.genTabPageSkillListUI()}
            </View>
        )
    }


    genTabPageDongTaiEmptyUI() {
        return (
            <View style={styles.dongtaiEmptyPanel}>
                <View style={styles.placeHolderCameraView}>
                    <Image style={styles.placeHolderCamera} source={require("../../images/mine/mine_camera.png")}/>
                </View>
                <Text style={styles.dongtaiTipText}>发布你的第一条动态吧~</Text>
            </View>
        );
    }

    genTabPageDongTaiUI() {
        return (
            <View style={styles.pagePanelScrollView}>
                {this.genTabPageDongTaiEmptyUI()}
            </View>
        )
    }

    genZiLiaoItem(info,index){
        return (
            <View key={`zi-liao-item-${index}`}>
            <View style={styles.ziliaoItem}>
                <Text style={styles.ziliaoTitle}>{info.title}</Text>
                <Text style={styles.ziliaoRightTitle}>{info.rightTitle}</Text>
            </View>
                <View style={styles.splitLine}/>
            </View>
        );
    }

    genTabPageZiLiaoUI() {
        const infoList = [
            {title:'生日',rightTitle:'1990-03-11'},
            {title:'星座',rightTitle:'摩羯座'},
            {title:'身高',rightTitle:'168cm'},
            {title:'常住地',rightTitle:'北京市·海淀区'},
        ];
        return (
            <View style={styles.pagePanelScrollView}>
                {infoList.map((info,index)=>this.genZiLiaoItem(info,index))}
            </View>
        )
    }

    genUserScrollTabPanelUI() {
        return (
            <ScrollableTabView
                removeClippedSubviews={true}
                page={0}
                style={styles.userScrollTabPanel}
                initialPage={0}
                renderTabBar={
                    () =>
                        <TabBar underlineColor={Color.PRIMARY_COLOR} tabBarTextStyle={styles.tabBarText}
                                tabStyles={{tab: styles.tabBar}}/>
                }>
                <View tabLabel={{label: "技能", badge: 0}} label="技能" style={styles.pagePanel}>
                    {this.genTabPageSkillUI()}
                </View>
                <View tabLabel={{label: "动态", badge: 0}} label="动态" style={styles.pagePanel}>
                    {this.genTabPageDongTaiUI()}
                </View>
                <View tabLabel={{label: "资料", badge: 0}} label="资料" style={styles.pagePanel}>
                    {this.genTabPageZiLiaoUI()}
                </View>
            </ScrollableTabView>
        )
    }

    onPressBack = () => {
        this.props.navigation.goBack();
    }

    onPressShare = () => {
        Util.showToast("分享")
    }

    onPressEdit = () => {
        Util.showToast("编辑")
    }

    genTopNavBarUI() {
        return (
            <View style={styles.topNavBar}>
                <View style={styles.topNavLeftArea}>
                    <ImageButton style={styles.backBtn} imageStyle={styles.backBtnImage}
                                 source={require('../../images/chart/back_ico.png')} onPress={this.onPressBack}/>
                </View>
                <View style={styles.topNavMidArea}/>
                <View style={styles.topNavRightArea}>
                    <ImageButton style={styles.editBtn} imageStyle={styles.editBtnImage}
                                 source={require('../../images/mine/mine_edit.png')} onPress={this.onPressEdit}/>
                    <ImageButton style={styles.shareBtn} imageStyle={styles.shareBtnImage}
                                 source={require('../../images/mine/mine_share.png')} onPress={this.onPressShare}/>
                </View>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genUserSkillDetailPanelUI()}
                    {this.genUserScrollTabPanelUI()}
                </ScrollView>
                {this.genTopNavBarUI()}
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {},
    bigImagePanel: {
        backgroundColor: Color.PRIMARY_COLOR,
    },
    bigImage: {
        height: Util.getScreenWidth(),
        resizeMode: 'cover',
        width: '100%',
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
    userDetailPanel: {
        backgroundColor: 'white',
        borderTopWidth: Util.getRealPixel(1),
        borderTopColor: '#EDEDEF',
    },
    userDetailTop: {
        padding: 8,
        position: 'absolute',
        bottom: 0,
        width: '100%',
        backgroundColor: 'rgba(0,0,0,0.3)'
    },
    userNickName: {
        color: 'white',
        fontSize: 20,
        fontWeight: '600',
    },
    userSkillDesc: {
        fontSize: 14,
        color: '#707070',
    },
    userSkillName: {
        fontSize: 14,
        color: 'white',
        marginTop: 4,
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        height: 14,
        width: 30,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginTop: 2,
        marginBottom: 2,
    },
    age: {
        color: '#FF0055',
        fontSize: 12,
        backgroundColor: 'transparent',
    },
    genderIcon: {
        width: 10,
        height: 10,
    },
    userInfoAgeAndLocation: {
        flexDirection: 'row',
        height: 20,
        alignItems: 'center',

    },
    rightActivePanel: {
        flex: 1,
        alignItems: 'flex-end',

    },
    btnActiveTime: {
        width: 78,
        height: 30,
        backgroundColor: '#FF0055',
    },
    btnActiveTimeText: {
        color: 'white',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        marginLeft: 8,
    },
    userDetailBottom: {
        padding: 8,
    },
    userDetailShortDesc: {
        color: '#707070',
        fontSize: 14,
        paddingBottom: 8,
    },
    userOrderNumberDesc: {
        color: '#707070',
        fontSize: 14,
        flex: 1,
    },
    userCridetLevelPanel: {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    userCridetLevelDesc: {
        color: '#707070',
        fontSize: 14,
        textAlign: 'right',
        marginLeft: 4,
    },
    gridViewGrop: {
        justifyContent: 'space-between',
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },

    rowInfo: {
        flexDirection: 'row',
    },

    skillPricePanel: {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
    skillPriceType: {
        fontSize: 14,
        color: '#FF6262',
    },
    skillPrice: {
        fontSize: 16,
        color: '#FF6262',
    },

    userInfoDetailPanel: {
        marginTop: 8,
    },
    //用户信息面板
    userTinyInfoPanel: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        padding: 8,
    },
    userHeadImage: {
        width: 40,
        height: 40,
        borderRadius: 6,
    },
    userTinyInfoMid: {
        marginLeft: 8,
    },
    userTinyInfoMidTop: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    userTinyInfoMidBottom: {
        flexDirection: 'row',
        marginTop: 4,
        alignItems: 'center',
    },
    userTinyInfoRight: {
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',

    },

    lastTime: {
        color: '#707070',
        fontSize: 12,
        marginLeft: 4,
    },

    userCommentPanel: {
        alignItems: 'center',
        backgroundColor: 'white',
    },
    userCommentItem: {},
    iconStarPanel: {
        flexDirection: 'row',
    },
    iconStar: {
        width: 14,
        height: 14,
    },
    commentItemHead: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 8,
    },
    commentItemHeadImage: {
        width: 28,
        height: 28,
        marginRight: 8,
        borderRadius: 14,
        resizeMode: 'cover',
        backgroundColor: 'gray',
    },
    commentItemUserNickName: {
        color: '#707070',
        fontSize: 14,
        flex: 1,
    },
    commentItemTime: {
        color: '#707070',
        fontSize: 14,
    },
    commentItemBody: {
        padding: 8,
    },
    commentItemText: {
        color: '#272727',
        fontSize: 14,
        marginTop: 8,
    },
    btnFocus: {},
    btnUnFocus: {
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: '#1D9AFF',
    },
    btnFocusText: {},
    btnUnFocusText: {
        color: '#1D9AFF',
    },
    bottomBar: {
        height: 54,
        borderTopWidth: Util.getRealPixel(1),
        borderTopColor: '#EDEDEF',
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',

    },
    btnChart: {
        width: 120,
        marginLeft: 8,
        marginRight: 8,
        height: 36,
        borderWidth: 1,
        borderColor: Color.BTN_BGCOLOR,
        backgroundColor: 'white',
    },
    btnChartText: {
        color: Color.TEXT_BTN,
    },
    btnOrder: {
        flex: 1,
        height: 36,
        marginRight: 8,
        borderWidth: 1,
        borderColor: Color.BTN_BGCOLOR,
        backgroundColor: Color.BTN_BGCOLOR,
    },
    userScrollTabPanel: {
        backgroundColor: 'white',
        flex: 1,
    },

    tabBarContainer: {
        marginTop: 0,
        marginBottom: 0,
        alignItems: 'flex-end',
        borderBottomWidth: 0,

    },
    tabBar: {
        width: Util.getScreenWidth() / 3,
        height: 30,
        marginLeft: 0,
        alignItems: 'center',
    },
    tabBarText: {
        fontSize: 14,
        // borderWidth:1,
    },
    pagePanelScrollView: {
        height: 300,
    },
    dongtaiEmptyPanel: {
        alignItems: 'center',
        justifyContent: 'center',
        padding:35,

    },
    placeHolderCameraView:{
        width: 127,
        height: 90,
        borderWidth:1,
        borderColor:'#E0E0E0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    placeHolderCamera: {
        width: 22,
        height: 22,
        resizeMode:'contain',
    },
    dongtaiTipText: {
        fontSize: 12,
        color: '#A6A6A6',
        marginTop: 20,
    },
    topNavBar: {
        position: 'absolute',
        top: 20,
        left: 0,
        right: 0,
        flexDirection: 'row',
        // borderWidth: 1,
    },
    topNavLeftArea: {
        width: 100,
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        // borderWidth: 1,
    },
    topNavMidArea: {
        flex: 1,
        height: 45,
        // borderWidth: 1,
    },
    topNavRightArea: {
        width: 100,
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        // borderWidth: 1,
    },
    backBtn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        // borderWidth: 1,
    },
    backBtnImage: {
        resizeMode: 'contain',
        width: 10,
        height: 17,
    },
    editBtn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        // borderWidth: 1,
    },
    editBtnImage: {
        resizeMode: 'contain',
        width: 15,
        height: 17,
    },
    shareBtn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        // borderWidth: 1,
    },
    shareBtnImage: {
        resizeMode: 'contain',
        width: 15,
        height: 16,
    },
    ziliaoItem:{
        height:50,
        flexDirection:'row',
        alignItems:'center',
    },
    ziliaoTitle:{
        flex:1,
        marginLeft:10,
        textAlign:'left',
        fontSize:14,
        color:'#707070',
    },
    ziliaoRightTitle:{
        flex:1,
        marginRight:10,
        textAlign:'right',
        fontSize:14,
        color:'#707070',
    },
});

export default connect((state, props) => {
    console.log('--------->searchService', state)
    return ({
        userSkillDetails: state.user.userSkillDetails,
    });
})(PersonInfoScene);